<template>
  <div class="receipt-order-edit-wrapper app-container" style="margin-bottom: 60px" v-loading="loading">

    <el-card header="基本信息">
      <el-row :gutter="10" type="flex" class="info-row">
        <!-- 订单编号信息 -->
        <el-col :span="8">
          <div class="info-item">
            <span>订单编号: </span>
            <span>{{ headerList.vbillcode }}</span>
          </div>
        </el-col>
        <!-- 订单类型ID信息 -->
        <el-col :span="8">
          <div class="info-item">
            <span>订单类型ID: </span>
            <span>{{ headerList.ctrantypeid }}</span>
          </div>
        </el-col>
        <!-- 转库单表头主键信息 -->
        <el-col :span="8">
          <div class="info-item">
            <span>转库单表头主键: </span>
            <span>{{ headerList.cspecialhid }}</span>
          </div>
        </el-col>
        <!-- 供应商相关信息 -->
        <!-- <el-col :span="8">
          <div class="info-item">
            <span>供应商编码: </span>
            <span>{{ detailsList.cvendorid.code }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <span>供应商名称: </span>
            <span>{{ detailsList.cvendorid.name }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <span>供应商主键: </span>
            <span>{{ detailsList.cvendorid.pk }}</span>
          </div>
        </el-col> -->
      </el-row>
    </el-card>

    <el-card header="修改单据信息" class="mt10">
      <el-row :gutter="10">
        <el-form ref="elForm" :model="headerList" :rules="rules" size="small" label-width="130px"
          style="padding: 10px  20px 0 20px;">
          <el-table :data="detailsList" border @selection-change="handleTableSelectionChange" label-position="top"
            :row-key="row => row.id">
            <!-- 选择框列 -->
            <el-table-column prop="crowno" label="行号" width="50" />
            <el-table-column label="物料信息">
              <template #default="{ row }">
                <div v-if="row.cmaterialoid">物料编码：{{ row.cmaterialoid.code }}</div>
                <div v-if="row.cmaterialoid">物料名称：{{ row.cmaterialoid.name }}</div>
                <div v-if="row.cmaterialoid">物料主键：{{ row.cmaterialoid.pk }}</div>
              </template>
            </el-table-column>
            <el-table-column label="库存信息">
              <template #default="{ row }">
                <div>
                  <span>库存状态：</span>
                  <span>{{ row.cgeneralbid }}</span>
                </div>
                <div>
                  <span>转库单表体主键：</span>
                  <span>{{ row.cspecialbid }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="批次号">
              <template #default="{ row }">
                <el-input v-model="row.vbatchcode" placeholder="请输入批次号" type="text" clearable size="small" />
              </template>
            </el-table-column>
            <!-- 数量信息 -->
            <el-table-column label="数量信息">
              <template #default="{ row }">
                <div>
                  <span>请领数量：</span>
                  <span>{{ row.vbdef1 }}</span>
                </div>
                <div>
                  <span>应转主数量：</span>
                  <el-input v-model="row.nnum" placeholder="请输入数量" type="number" clearable size="small"
                    @input="calculateAssistNum(row)" />
                </div>
                <div>
                  <span>应转数：</span>
                  <el-input v-model="row.nassistnum" placeholder="请输入数量" type="number" clearable size="small"
                    readonly />
                </div>
              </template>
            </el-table-column>
            <el-table-column type="selection" width="55" :reserve-selection="true" />
          </el-table>

          <el-form-item size="large" style="margin-top: 20px; float: right;">
            <el-button type="primary" @click="queryTransferOrdersUpdateList">提交</el-button>
            <!-- <el-button @click="resetForm">重置</el-button> -->
          </el-form-item>
        </el-form>
      </el-row>
    </el-card>
  </div>
</template>

<script>
// 获取wms转库单
import { getTransferOrdersInfo } from '@/api/transfer/index.js'

// 修改NCC转库单接口
import { createTransferOrdersUpdate } from '@/api/transfer/index.js'

export default {
  data() {
    return {
      loading: false, // 控制加载状态
      selectedRow: null, // 当前选中的表格行
      tableRowChecked: [], // 用于记录每行的选中状态
      headerList: {
        cspecialhid: '', // 入库单表头主键
      },
      detailsList: [], // 商品明细信息
      rules: {
        cspecialhid: [
          { required: true, message: '请输入入库单表头主键', trigger: 'blur' }
        ]
      },
      transType: 'TransferWareHouseMove', // 转库类型 --- 移库
    }
  },
  created() {
    // 接收路由参数
    this.vbillcode = this.$route.query.vbillcode || '';
    if (!this.vbillcode) {
      this.$message.error('未收到订单编号，请返回重试！');
    }
  },
  mounted() {
    this.queryTransferOrdersNccList();  // 获取NCC转库单
  },
  methods: {
    // 实收主数量与实收辅数量转换
    calculateAssistNum(row) {
      const changerateArr = row.vchangerate.split('/');
      const mainNum = parseFloat(row.nnum);
      const factor = parseFloat(changerateArr[1]) / parseFloat(changerateArr[0]);
      row.nassistnum = (mainNum * factor).toFixed(4);  // 这里保留两位小数，可按需调整
    },
    // 处理表格行选择事件
    handleTableSelectionChange(selectedRows) {
      // 根据传入的当前选中的行数据数组selectedRows，更新tableRowChecked数组来标记每行的选中状态
      // 通过map遍历detailsList中的每一行数据row，判断它是否在selectedRows中，若在则对应位置标记为true（表示选中），否则标记为false
      this.tableRowChecked = this.detailsList.map(row => selectedRows.includes(row));
      // 将当前选中的行数据整体赋值给selectedRow属性，方便在其他地方获取和使用选中行的详细数据（支持多选情况）
      this.selectedRow = selectedRows;
    },

    /**
    * 查询修改NCC材料出库单
    */
    queryTransferOrdersUpdateList() {
      // 开启加载状态提示
      this.loading = true;

      // 直接根据tableRowChecked数组筛选出选中行数据，即获取当前在表格中被用户勾选的行数据
      const selectedRows = this.detailsList.filter((_, index) => this.tableRowChecked[index]);

      // 如果没有选中任何行，给出提示信息告知用户需要选择入库项，并关闭加载状态提示，直接返回不再继续后续操作
      if (!selectedRows.length) {
        this.$message.warning('请选择待修改的明细行');
        this.loading = false;
        return;
      }

      // 将选中行的数据进行整理，提取出需要传递给后端接口的各个字段信息
      const detailsData = selectedRows.map(row => ({
        cspecialbid: row.cspecialbid,
        cmaterialvid: row.cmaterialvid.pk,
        nnum: row.nnum
      }));

      // 构建表头信息对象header，包含入库单表头主键和仓库信息等关键表头数据，用于传递给后端接口
      const header = {
        cspecialhid: this.headerList.cspecialhid
      };

      // 如果表头关键信息（入库单表头主键或仓库信息）有空值，说明用户填写不完整，给出错误提示并关闭加载状态，返回不再继续接口请求操作
      if (!header.cspecialhid) {
        this.$message.error('请填写完整的表头信息');
        this.loading = false;
        return;
      }

      // 将表头信息和整理好的商品明细信息整合到一个对象combinedData中
      const combinedData = { ic_whstrans_h: header, ic_whstrans_b: detailsData };

      createTransferOrdersUpdate(combinedData)
        .then(response => {
          console.log('接口请求成功，返回response数据：', response);

          this.loading = false;

          if (response.code === 200) {
            this.$message.success(response.msg);
            this.queryTransferOrdersNccList();  // 获取NCC转库单
            this.$tab.closePage(); // 关闭当前页面的标签
          } else {
            this.$message.error('提交失败，请稍后再试');
          }
        })
        .catch(error => {
          this.loading = false;
          console.log('接口请求出错:', error);
        });
    },


    /**
    * 查询获取NNCC转库单列表
    */
    queryTransferOrdersNccList() {
      const params = {
        vbillcode: this.vbillcode,
        // transType: this.transType, // 转库类型
      };
      console.log("params监控=", params)
      this.loading = true;

      getTransferOrdersInfo(params)
        .then(response => {
          console.log("response=", response)
          // 假设接口返回的数据数组中第一个元素包含了我们需要的header和details等信息，先获取这个元素
          const responseData = response.rows[0];

          if (responseData) {
            this.headerList = responseData.header;

            // 对获取到的商品明细信息数据中的每个元素进行处理，添加一个唯一标识id（此处简单使用序号作为示例），
            // 然后赋值给detailsList属性，方便表格组件正确识别每行数据以及后续可能的操作关联
            this.detailsList = responseData.details.map((detail, index) => ({ ...detail, id: index + 1 }));

          } else {
            this.$message.error('没有找到相关数据');
          }
          this.loading = false;
          // 关闭加载状态提示，数据获取完成
        })
        .catch(() => {
          this.loading = false;
          // this.$message.error('采购订单数据加载失败');
        });
    },

    resetForm() {
      this.$refs.elForm.resetFields();
    }
  }
}
</script>

<style scoped></style>
